<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>滑块验证码 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>滑块验证码</h1>
  <time datetime=2020-06-01T11:00:38&#43;0800 class="post-date">Mon, Jun 1, 2020</time>
  <p><strong>安装插件</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">npm</span> <span style="color:#a6e22e">install</span> <span style="color:#a6e22e">vue</span><span style="color:#f92672">-</span><span style="color:#a6e22e">drag</span><span style="color:#f92672">-</span><span style="color:#a6e22e">verify</span> <span style="color:#f92672">--</span><span style="color:#a6e22e">save</span>
</code></pre></div><p><strong>1、在使用的vue页面导入</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">dragVerify</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;vue-drag-verify&#39;</span>;
</code></pre></div><p><strong>2、注册组件</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//注册组件标签,在export default中
</span><span style="color:#75715e"></span>  <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
  		<span style="color:#e6db74">&#39;dragVerify&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">dragVerify</span>,
  		<span style="color:#e6db74">&#39;myheader&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">myheader</span>

  },
</code></pre></div><p><strong>3、在template中使用滑块</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">drag-verify</span>

             <span style="color:#f92672">:width</span><span style="color:#e6db74">=&#34;width&#34;</span>
             <span style="color:#f92672">:height</span><span style="color:#e6db74">=&#34;height&#34;</span>
             <span style="color:#f92672">:text</span><span style="color:#e6db74">=&#34;text&#34;</span>
             <span style="color:#a6e22e">ref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Verify&#34;</span>
             &gt;

<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/drag-verify&gt;</span>
</code></pre></div><p><strong>4、data中定义所使用的变量</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//滑块验证码，width和height根据实际滑块定义
</span><span style="color:#75715e"></span><span style="color:#a6e22e">text</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;请将滑块拖动到最右侧&#39;</span>,
<span style="color:#a6e22e">width</span><span style="color:#f92672">:</span><span style="color:#ae81ff">300</span>,
<span style="color:#a6e22e">height</span><span style="color:#f92672">:</span><span style="color:#ae81ff">40</span>,
</code></pre></div><p><strong>5、提交时进行判断</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//判断是否拖动滑块
</span><span style="color:#75715e"></span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">Verify</span>.<span style="color:#a6e22e">isPassing</span>);
<span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">Verify</span>.<span style="color:#a6e22e">isPassing</span><span style="color:#f92672">==</span><span style="color:#66d9ef">false</span>){
    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$Message</span>(<span style="color:#e6db74">&#39;请滑动验证&#39;</span>);
    <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span>;
}
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
